<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="query">
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="this.pageInfo.rows" highlight-current-row v-loading="listLoading"
                  @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>

            <el-table-column prop="title" label="title" width="200" sortable>
            </el-table-column>
            <el-table-column prop="value" label="value" width="200" sortable>
            </el-table-column>
            <el-table-column prop="intro" label="介绍" width="200" sortable>
            </el-table-column>
            <el-table-column prop="parent.title" label="数据字典" width="200" sortable>
            </el-table-column>



            <el-table-column label="操作" width="400">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" :current-page="query.currentPage"
                           @current-change="handleCurrentChange" :page-size="this.query.pageSize"
                           :total="this.pageInfo.total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增编辑页面-->
        <el-dialog title="编辑/新增" :visible.sync="saveFormVisible" :close-on-click-modal="false">
            <el-form :model="saveForm" label-width="80px" ref="saveForm">
                <el-form-item label="title">
                    <el-input v-model="saveForm.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="value">
                    <el-input v-model="saveForm.value" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="介绍">
                    <el-input v-model="saveForm.intro" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="数据字典">
                    <el-select v-model="saveForm.parentId" placeholder="请选择">
                        <el-option
                            v-for="item in dictionary"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="saveFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>


export default {
    data() {
        return {
            dictionary:[],
            saveLoading: false,

            saveForm: {
                id: null,
                title: '',
                value: '',
                intro: '',
                parentId: '',
                parent:{
                    id:''
                }
            },
            saveFormVisible: false,

            isIndeterminate: false, //用来控制全选框的状态
            checkAll: false, //控制全选框是否选中

            listLoading: false,
            sels: [],//列表选中列

            query: {
                keyword: "",
                currentPage: 1,
                pageSize: 10
            },

            pageInfo: {
                total: 0,
                rows: []
            },

        }
    },
    methods: {

        handleCheckAllChange(val) {
            this.dictionaryitemPermission.permissionSns = val ? this.allPermissionSns : [];
            this.isIndeterminate = false;
        },
        

        handleAdd() {
            this.saveFormVisible = true;
            //每次新增都要将表单数据初始化
            this.saveForm = {
                id: null,

            };

        },

        handleEdit(index, row) {
            this.saveFormVisible = true;

            this.saveForm = Object.assign({}, row);

            this.$http.get("/dictionary")
                .then(result => {
                    result = result.data;
                    this.dictionary = result.data;

                })
        },
        saveSubmit() {
            this.$confirm('要确定提交吗？', '提示', {}).then(() => {
                this.addLoading = true;

                this.$http.put("/dictionaryitem", this.saveForm)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            this.$message({
                                message: '成功',
                                type: 'success'
                            });
                        }
                        this.saveFormVisible = false;
                        this.getDictionaryitem();
                    })
                    .catch(result => {
                        this.$message({
                            message: '网络错误',
                            type: 'error'
                        });
                    });
            })
        },
        search() {
            this.query.currentPage = 1;
            this.getDictionaryitem();
        },

        handleCurrentChange(val) {
            this.query.currentPage = val;
            this.getDictionaryitem();
        },

        getDictionaryitem() {
            this.$http.post("/dictionaryitem", this.query)
                .then(result => {
                    result = result.data;
                    this.pageInfo = result.data

                })
        },
        //删除
        handleDel: function (index, row) {
            this.$confirm('确认删除该记录吗?', '提示', {
                type: 'warning'
            }).then(() => {//确认删除的按钮
                //加载页面设为true
                this.listLoading = true;
                //获取删除数据id
                let id = row.id;
                this.$http.delete("/dictionaryitem/" + id)
                    .then(result => {
                        //关闭加载框
                        this.listLoading = false;
                        //重新查询数据
                        this.search()
                        result = result.data
                        if (result.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })
            })
        },

        selsChange: function (sels) {
            this.sels = sels;
        },
        //批量删除
        batchRemove: function () {
            var ids = this.sels.map(item => item.id);
            this.$confirm('确认删除选中记录吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;

                this.$http.patch("/dictionaryitem/", ids)
                    .then(result => {
                        //关闭加载框
                        this.listLoading = false;
                        //重新查询数据
                        this.search()
                        result = result.data
                        if (result.success) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    })

            }).catch(() => {

            });
        }


    },
    mounted() {
        this.getDictionaryitem();
    }
}

</script>

<style scoped>

</style>